import React, { Component } from 'react'
import { flushSync } from 'react-dom'

function Hello(props) {
  return <h2>{props.message}</h2>
}

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: 'Hello World',
      counter: 0,
    }
  }

  changeText() {
    // 在react18之前，setTimeout中setState操作，是同步操作的（promise，dom操作）
    // 在react18中， setTimeout中的setState异步操作（批量处理）
    setTimeout(() => {
      // this.setState({ message: '你好' })
      flushSync(() => {
        // 内部还是批处理操作
        this.setState({ message: '你好' })
      })
      console.log(this.state.message)
    }, 0)
  }

  increment() {}

  render() {
    const { message, counter } = this.state

    return (
      <div>
        <h2>message: {message}</h2>
        <button onClick={() => this.changeText()}>修改文本</button>
        <h2>当前计数：{counter}</h2>
        <button onClick={() => this.increment()}>+1</button>

        <Hello message={message} />
      </div>
    )
  }
}

export default App
